<link href="../lib/jqgrid/css/jqgrid.css" type="text/css" rel="stylesheet"/>
<script src="../lib/jquery-1.8.2.min.js"></script>
<script src="../lib/jquery-ui.custom.min.js"></script>
<script src="../lib/jqgrid/js/jquery.jggrid.zh-cn.js"></script>
<script src="../lib/jqgrid/js/jquery.jqgrid.min.js"></script>



<table id="guest-info-grid-table"></table>
<div  id="guest-info-grid-pager"></div>

<script type="text/javascript">
    var grid_selector = "#guest-info-grid-table";
    var pager_selector = "#guest-info-grid-pager";
    var grid;
    $(function () {
        //jQuery(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll','overflow-y ':'none','padding':0});
        grid = jQuery(grid_selector).jqGrid({
            datatype: "local",
            colNames:['id','操作','房源编号','交易','城区','楼盘字典','座栋位置','户型','面积','客源编号','交易','客户','评价','部门','员工','登记日期'],
            colModel: [
                {name:'code',index:'code',sortable:false, hidden:true,editable:false,frozen:true},
                {name:'code',index:'code',sortable:false,width:'80',hidden:false,editable:false,formatter:formatOperation,frozen:true,style:'background:red;'},
                {name:'code',index:'code',sortable:false, width:'100',align:'center',editable:false,frozen:true},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'320',editable:false},
                {name:'code',index:'code',sortable:false, width:'100',editable:false},
                {name:'code',index:'code',sortable:false, width:'80',editable:false},
                {name:'code',index:'code',sortable:false, width:'100',editable:false}
            ] ,
            rowNum:10,
            width:1000,
            rowList:[10,20,30],
            pager: pager_selector,
            sortname: 'name',
            viewrecords: true,
            sortorder: "desc",
            shrinkToFit: false,
            multiselect:true,
            height: 'auto'
        });
        jQuery(grid_selector).jqGrid('setFrozenColumns');
        var mydata = [
            {code:"1"},
            {code:"2"},
            {code:"3"},
            {code:"4"},
            {code:"5"},
            {code:"6"},
            {code:"7"},
            {code:"8"},
            {code:"9"},
            {code:"10"}

        ];
        /* 底部导航栏*/
        /*jQuery(grid_selector).jqGrid('navGrid',pager_selector,{
            add:false,del:false,edit:false,search : false,refresh:true,view : false
        });*/

        for(var i=0;i<=mydata.length;i++){
            grid.jqGrid('addRowData',i+1,mydata[i]);
        }


    });
    function formatOperation(cellvalue, options, cell){
        var id = cell["id"];
        return "<button class='btn btn-primary btn-mini' title='编辑'><i class='fa fa-pencil'></i>&nbsp;编辑</button>";
    }

</script>